<script lang="ts">
export default {
  name: "DeviceRecordPagination"
}
</script>

<template>
  <div class="simple-pagination">
    <!-- 上一页按钮 -->
    <button
      :disabled="props.currentPage === 1"
      class="pagination-btn"
      @click="goToPage(props.currentPage - 1)"
    >
      上一页
    </button>

    <!-- 当前页码显示 -->
    <span class="current-page">第 {{ props.currentPage }} 页</span>

    <!-- 下一页按钮 -->
    <button
      :disabled="!props.hasNextPage"
      class="pagination-btn"
      @click="goToPage(props.currentPage + 1)"
    >
      下一页
    </button>
  </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";

const props = defineProps(['currentPage','hasNextPage'])
const emit = defineEmits(['page-change']);// 定义组件的事件通知


function goToPage(page: any) {
  if (page < 1 || (page === props.currentPage)) {
    return;
  }

  if (page > props.currentPage){
    emit('page-change', "next");
  }else{
    emit('page-change', "prev");
  }
}

</script>

<style scoped>
.simple-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.pagination-btn {
  padding: 5px 15px;
  border: 1px solid #d1d5db;
  background-color: #f9fafb;
  border-radius: 4px;
  cursor: pointer;
}

.pagination-btn:disabled {
  color: #9ca3af;
  background-color: #e5e7eb;
  cursor: not-allowed;
}

.pagination-btn:not(:disabled):hover {
  background-color: #e5e7eb;
}

.current-page {
  padding: 0 10px;
  font-weight: bold;
}
</style>
